<template>
  <div class="main" v-loading="loading" element-loading-text="数据努力加载中..." element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.4)">
    <navTop></navTop>
    <div class="contentboxset">
      <div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>作业</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/homework' }">作业管理</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="idenboxmain" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px'">
      <div class="dtkanswerlist">
        <p :title="$route.query.examtitle">
          {{ $route.query.examtitle }}
          <!-- <el-select v-model="scanType" placeholder="" @change="scanchange" clearable>
                        <el-option
                            v-for="item in sbtype"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select> -->
        </p>
        <ul>
          <li>布置人数：{{ studenttotal }}</li>
          <li>已扫描数：{{ identotal }}</li>
          <li>
            未上传数：
            {{ notuploadtotal }}人
            <!-- <el-tooltip class="item" popper-class="custom-tooltip" effect="dark" :content="notuploadSudent" placement="bottom-start" v-if="notuploadtotal!=0"> -->
            <i style="font-style: normal;color:#295CFF;display: inline-block;margin-left:10px;cursor: pointer;"
              @click="notuploadstuentishow = true" v-if="notuploadtotal != 0">查看名单</i>
            <!-- </el-tooltip> -->
          </li>
        </ul>
      </div>
      <div class="identistatusmodify">
        <div class="tychulititle">异常处理：<div v-if="sbstatus.paperCount === sbstatus.identifyCount"><i
              class="el-icon-success"></i>识别完成</div>
          <div v-else><i class="el-icon-loading"></i>识别中</div><span>/ 识别进度：{{ sbstatus.paperCount }}</span>
        </div>
        <ul class="tychuliul">
          <li @click="ycrouterlink('/homeabnormalexamnumber', 1)">
            <h4>答题卡异常处理：{{ sbstatus.examNoExceptionCount }}</h4>
            <span>定位点异常、试卷异常、重复试卷、<br />未知考号、选科错误等问题</span>
          </li>
          <li @click="ycrouterlink('/homeoptionexception', 2)">
            <h4>选项异常处理：{{ sbstatus.optionExceptionCount }}</h4>
            <span>客观题多涂、未涂、<br />置信度低等</span>
          </li>
          <li @click="ycrouterlink('/homeabnormalrating', 3)">
            <h4>打分异常处理：{{ sbstatus.scoreExceptionCount }}</h4>
            <span>评阅教师给分多涂、未涂、<br />置信度低等情况</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="headerwidth" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px'">
      <div class="searchlist">
        <div style="width:300px;display: flex;align-items: center;">
          <router-link :to="{
            path: '/studentscore',
            query: {
              subjectid: $route.query.subjectid,
              examid: $route.query.examid,
              examtitle: $route.query.examtitle,
              sujectname: $route.query.sujectname,
            }
          }" active-class="hover">原始成绩({{ total }})</router-link>
          <router-link :to="{
            path: '/homeidenificationrecord',
            query: {
              subjectid: $route.query.subjectid,
              examid: $route.query.examid,
              examtitle: $route.query.examtitle,
              sujectname: $route.query.sujectname,
            }
          }" active-class="hover">识别记录({{ identotal }})</router-link>
        </div>
        <div class="qxboxset" v-if="total && total != 0">
          <div>
            <span @click="messboxclickassynic">查看分析</span>
          </div>
          <!-- 本次错题 -->
          <!-- <div v-click-outside="closeDialog">
            <span @click.stop="messboxclick">本次错题<i class="el-icon-arrow-down el-icon--right"></i></span>
            <ul class="ulbox" v-if="messboxishow">
              <b>选择班级</b>
              <li v-for="item in classlistbox" :key="item.id"
                @click.stop="messboxcontent(item.studentCount, item.gradeId, item.classId, item.gradeName, item.className, '/errorwork')">
                {{ item.gradeName }}{{ item.className }}<i>{{ item.studentCount }}</i></li>
            </ul>
          </div>
          <div v-click-outside="closeDialog">
            <span @click.stop="messboxclick1">学情分析<i class="el-icon-arrow-down el-icon--right"></i></span>
            <ul class="ulbox" v-if="messboxishow1">
              <b>选择班级</b>
              <li v-for="item in classlistbox" :key="item.id"
                @click.stop="messboxcontent(item.studentCount, item.gradeId, item.classId, item.gradeName, item.className, 'https://test-ra.bsedu.com')">
                {{ item.gradeName }}{{ item.className }}<i>{{ item.studentCount }}</i></li>
            </ul>
          </div>
          <div v-click-outside="closeDialog">
            <span @click.stop="messboxclick2">在线讲评<i class="el-icon-arrow-down el-icon--right"></i></span>
            <ul class="ulbox" v-if="messboxishow2">
              <b>选择班级</b>
              <li v-for="item in classlistbox" :key="item.id"
                @click.stop="messboxcontent(item.studentCount, item.gradeId, item.classId, item.gradeName, item.className, 'https://test-wb.bsedu.com')">
                {{ item.gradeName }}{{ item.className }}<i>{{ item.studentCount }}</i></li>
            </ul>
          </div>
          <div v-click-outside="closeDialog">
            <span @click.stop="messboxclick3">学生查分<i class="el-icon-arrow-down el-icon--right"></i></span>
            <div class="phoneimagecontent" v-if="phoneImageishow">
              <img src="../../assets/image/school/phoneimage.png" alt="学生查分二维码">
              <b>点击二维码复制该图片</b>
            </div>
          </div> -->
        </div>
      </div>
      <div class="contentMain">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <ul>
            <li>
              <span>选择查看班级：</span>
              <el-select v-model="classid" placeholder="请选择" @change="classchange" clearable>
                <el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </li>
            <li>
              <span>查找准考证号：</span>
              <el-input clear v-model="scorelistobj.query.examNumber" @change="examnumberTab" clearable></el-input>
            </li>
            <li>
              <span>查找姓名：</span>
              <el-input clear v-model="scorelistobj.query.studentName" @change="studentNameTab" clearable></el-input>
            </li>
            <li style="line-height:35px;">
              <el-checkbox v-model="checked" style="margin-bottom:0"
                @change="val => checkchange(val)">查看选择题得分</el-checkbox>
            </li>
          </ul>
          <div style="font-size:14px;color:#5B6371;width:277px;"><i class="el-icon-warning"
              style="margin-right:5px;"></i>点击选项或分数可查看作答痕迹</div>
        </div>
        <div v-show="!checked" class="tablebox">
          <!-- :style="tableWidthStyle" -->
          <div v-if="questionlist.length > 0">
            <el-table class="custom-table" ref="multipleTable" :data="questionlist" tooltip-effect="dark"
              :height="tableHeight" @selection-change="handleSelectionChange" stripe
              :header-cell-style="{ background: '#e8f0fa', color: '#2A303B', fontWeight: '500' }" row-key="uniqueKey">
              <el-table-column type="selection" width="55" :reserve-selection="true" />
              <el-table-column prop="batchNumber" label="批次号" width="80" />
              <el-table-column prop="serialNumber" label="流水号" width="80" />
              <el-table-column prop="examNumber" label="考号" width="120" />
              <el-table-column prop="examName" label="姓名" width="100" />
              <el-table-column width="150"
                v-for="(chil, colIndex) in questionlist.length > 0 ? questionlist[0].objectiveAnswers : []"
                :key="'chil-' + colIndex"
                :label="chil.smallQuestionNumber == 0 ? chil.questionRuleName + chil.questionNumber : chil.questionNumber + '-' + chil.questionRuleName + chil.smallQuestionNumber">
                <template #default="{ row, $index }">
                  <div style="position:relative">
                    <b :ref="`question-${$index}-${colIndex}`"
                      @click="handleCellClick(row.objectiveAnswers[colIndex], row.paperImages)"
                      style="display:block;width:100%;height:42px;cursor:pointer;line-height:42px;">
                      {{ row.objectiveAnswers[colIndex].option ? row.objectiveAnswers[colIndex].option : 0 }}
                    </b>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else style="height:calc(100vh - 420px);position:relative">
            <empty></empty>
          </div>
        </div>
        <div v-show="checked">
          <div class="tablebox" v-if="studentlist.length > 0">
            <el-table class="custom-table" ref="multipleTable" :data="studentlist" tooltip-effect="dark"
              style="width: 100%" :height="tableHeight" @selection-change="handleSelectionChange" stripe
              :header-cell-style="{ background: '#e8f0fa', color: '#2A303B', fontWeight: '500' }" row-key="id">
              <el-table-column type="selection" width="55" :reserve-selection="true">
              </el-table-column>
              <el-table-column label="准考证号" width="120">
                <template slot-scope="scope">{{ scope.row.examNumber }}</template>
              </el-table-column>
              <el-table-column label="姓名">
                <template slot-scope="scope">{{ scope.row.name ? scope.row.name : '--' }}</template>
              </el-table-column>
              <el-table-column label="班级">
                <template slot-scope="scope">{{ scope.row.className ? scope.row.className : '--' }}</template>
              </el-table-column>
              <el-table-column prop="totalScore" label="总分">
                <!-- <template slot-scope="scope">
								{{scope.row.totalScore?scope.row.totalScore:'--'}}
							</template> -->
              </el-table-column>
              <el-table-column label="客观题">
                <template slot-scope="scope">{{
                  scope.row.objectiveTotalScore ? scope.row.objectiveTotalScore : 0 }}</template>
              </el-table-column>
              <el-table-column label="主观题">
                <template slot-scope="scope">{{ scope.row.subjectivityTotalScore ? scope.row.subjectivityTotalScore : 0
                }}</template>
              </el-table-column>
              <el-table-column width="150" v-for="(question, index) in studentlist[0].smallQuestions || []"
                :key="`question-${question.id}`"
                :label="question.smallQuestionNumber == 0 ? question.name + question.questionNumber : question.questionNumber + '-' + question.name + question.smallQuestionNumber">
                <template slot-scope="scope">
                  <b style="display:block;width:100%;height:42px;cursor:pointer;line-height:42px;"
                    @click="handleCellClick(scope.row.smallQuestions[index], scope.row.paperImages)">
                    {{ scope.row.smallQuestions[index].score }}
                    <span style="color:#295CFF" v-if="scope.row.smallQuestions[index].isAIScore">（{{scope.row.smallQuestions[index].aiScore}}）</span>
                  </b>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <div style="display: flex;">
                    <el-button @click="lookcard(scope.row)" type="text" size="small"
                      style="display: flex;align-items: center;"><img src="../../assets/image/school/pj.png"
                        style="width:12px;margin-right:5px;" />答题卡</el-button>
                    <el-button @click="editscoresingle(scope.row)" type="text" size="small"
                      style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png"
                        style="width:12px;margin-right:5px;" />编辑</el-button>
                    <!-- <el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/qk.png" style="width:12px;margin-right:5px;" />缺考</el-button> -->
                    <el-button @click="deletescore(scope.row.id)" type="text" size="small"
                      style="display: flex;align-items: center;color:#EC555A"><img
                        src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else style="height:calc(100vh - 420px);position:relative">
            <empty></empty>
          </div>
        </div>

      </div>
    </div>
    <div class="examfooter">
      <div class="examFootercontent" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px'">
        <div class="totaldata">
          <span>已选<i>{{ multipleSelection.length }}</i>项 / 共{{ total }}项</span>
          <em @click="blfsscore">补录分数</em>
          <!-- <em>批量补录</em> -->
          <em @click="pleditscore">批量修改</em>
          <em @click="deletebatchscore">批量删除</em>
        </div>
        <div>
          <el-pagination background :current-page="scorelistobj.page" @current-change="handleCurrentChange"
            :page-sizes="[20, 50, 100]" @size-change="handleSizeChange" :page-size="scorelistobj.pageSize"
            layout="sizes, prev, pager, next" :total="total">
          </el-pagination>
          <!-- <el-pagination
						background
					      @current-change="handleCurrentChange"
					      layout="prev, pager, next, jumper"
						  :page-size="scorelistobj.pageSize"
					      :total="total">
					    </el-pagination> -->
        </div>
      </div>
    </div>
    <!-- 补录分数 -->
    <div class="addExamMain" v-if="editscoreIshow">
      <div class="addExamContent">
        <h3>补录分数</h3>
        <ul>
          <li>
            <span>准考证号：</span>
            <div class="inputBox">
              <el-input v-model="exitStudent.examnumber" placeholder="请输入内容"></el-input>
            </div>
          </li>
          <li>
            <span>学生姓名：</span>
            <div class="inputBox">
              <el-input v-model="exitStudent.name" placeholder="请输入内容"></el-input>
            </div>
          </li>
          <li>
            <span>学生班级：</span>
            <div class="inputBox">
              <el-select v-model="exitStudent.xb" placeholder="请选择">
                <el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </li>
          <li v-for="item in questionlist" :key="item.id">
            <span>{{ item.smallQuestionNumber == 0 ? item.name + item.questionNumber : item.questionNumber + '-' +
              item.name
              + item.smallQuestionNumber }}：</span>
            <div class="inputBox">
              <el-input v-model="item.score" placeholder="请输入内容"></el-input>
            </div>
          </li>
          <!-- <li style="color:red;" v-if="attentionIshow">
						<span></span>
						<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
					</li> -->
        </ul>
        <div class="groupbutton">
          <el-button type="primary" @click="editscorejx">保存并继续</el-button>
          <el-button type="primary" @click="editscoresure">确定</el-button>
          <el-button type="primary" @click="editscoregoback">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 单个小题修改 -->
    <div class="addExamMain" v-if="singlequestionishow">
      <div class="addExamContent">
        <h3>单个修改小题分</h3>
        <div class="singlecontent">
          <span>准考证号：{{ editcon.examNumber }}</span><span>考生姓名：{{ editcon.name }}</span><span>考生班级：{{ editcon.className
          }}</span>
        </div>
        <!-- <div v-for="(month, index) in editcon.smallQuestions" :key="index" class="checkbox-group"> -->
        <!-- <el-checkbox :indeterminate="isIndeterminate(month)" v-model="month.checkedAll" @change="handleCheckAllChange(month, $event)">{{month.name}}</el-checkbox> -->
        <div class="checkboxcontent">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
            @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="selectchecked" class="horizontal-checkbox-group">
            <el-checkbox v-for="option in editcon.smallQuestions" :key="option.id" :label="option.id">
              {{ option.smallQuestionNumber == 0 ? option.name + option.questionNumber : option.questionNumber + '-' +
                option.name + option.smallQuestionNumber }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- </div> -->
        <div class="czdfSet">
          操作得分：
          <el-select v-model="singleobj.operator" clearable placeholder="请选择">
            <el-option v-for="item in operatorlist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-input clear v-model="singleobj.score"></el-input>
          <span>
            <el-checkbox v-model="singleobj.isRounding"></el-checkbox>
            使用整分(1/0.5)
          </span>
        </div>
        <div class="groupbutton">
          <el-button type="primary" @click="singleeditscorejx">保存并继续</el-button>
          <el-button type="primary" @click="singleeditscoresure">确定</el-button>
          <el-button type="primary" @click="singleeditscoregoback">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 批量修改小题分 -->
    <div class="addExamMain" v-if="plquestionishow">
      <div class="addExamContent">
        <h3>批量修改小题分</h3>
        <el-radio v-model="plxiuradio" label="1">指定范围修改</el-radio>
        <el-radio v-model="plxiuradio" label="2">固定范围修改</el-radio>
        <div class="czdfContent" style="padding-top:14px;" v-if="plxiuradio == 1">
          <span>准考证号：</span>
          <el-input v-model="batchModife.examNumber"></el-input>
        </div>
        <!-- <div class="czdfContent" v-if="plxiuradio == 2">
          <span>修改范围：</span>
          <el-select v-model="gradeId" placeholder="请选择" clearable @change="xbchange">
            <el-option v-for="item in gradelist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div> -->
        <div class="czdfContent" style="padding-top:14px;" v-if="plxiuradio == 2">
          <span>修改班级：</span>
          <el-select v-model="classIdlist" multiple placeholder="请选择" clearable>
            <el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="checkbox-group" style="padding-top:14px;">
          <el-checkbox :indeterminate1="isIndeterminate1" v-model="examcheckAll"
            @change="handleCheckAllChange1">全选</el-checkbox>
          <el-checkbox-group v-model="smallselectAll" class="horizontal-checkbox-group">
            <el-checkbox v-for="option in studentlist[0].smallQuestions" :key="option.id" :label="option.id">
              {{ option.smallQuestionNumber == 0 ? option.name + option.questionNumber : option.questionNumber + '-' +
                option.name + option.smallQuestionNumber }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="czdfSet">
          操作得分：
          <el-select v-model="batchModife.operator" clearable placeholder="请选择">
            <el-option v-for="item in operatorlist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-input clearable v-model="batchModife.score"></el-input>
          <span>
            <el-checkbox v-model="batchModife.isRounding"></el-checkbox>
            使用整分(1/0.5)
          </span>
        </div>
        <div class="groupbutton">
          <el-button type="primary" @click="pleditscorejx">保存并继续</el-button>
          <el-button type="primary" @click="pleditscoresure">确定</el-button>
          <el-button type="primary" @click="pleditscoregoback">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 答题卡 -->
    <div class="missanexam" v-if="cardexamIshow">
      <h3><i class="el-icon-warning-outline"></i>请选择查看答题卡科目</h3>
      <el-radio-group v-model="cardradio">
        <el-radio v-for="item in xuekelist" :label="item.id" :key="item.id">{{ item.name }}</el-radio>
      </el-radio-group>
      <div class="boxbutton">
        <el-button type="primary" @click="cardlooksure">确定</el-button>
        <el-button type="info" @click="cardexamIshow = false">取消</el-button>
      </div>
    </div>
    <!-- 显示图片 -->
    <template>
      <div class="loadimgBox" v-if="imageishow">
        <span class="closeimg" @click="closeboximg"><i class="el-icon-close"></i></span>
        <div class="image-wrapper" :style="{
          transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
        }" @mousedown="onMouseDown">
          <img :src="imageurlink" alt="" draggable="false" />
          <b class="fiexdstle" :style="{
            top: top + 'px',
            left: left + 'px',
            width: width + 'px',
            height: height + 'px',
            position: 'absolute',
            pointerEvents: 'none'
          }"></b>
        </div>
      </div>
    </template>



    <!-- 未上传名单 -->
    <div class="notuploadStudent" v-if="notuploadstuentishow">
      <div class="notuploadStudentContent">
        <h3>未上传名单</h3>
        <div id="content-to-copy" class="contentset">
          <!-- 优化后的分段显示 -->
          <div v-for="classInfo in formattedNotUploadStudents" :key="classInfo.className" class="class-section">
            <div class="class-title">{{ classInfo.className }}：（共{{ classInfo.totalCount }}人）</div>
            <div class="student-groups">
              <div v-for="(group, groupIndex) in classInfo.studentGroups" :key="groupIndex" class="student-row">
                <span v-for="(student, studentIndex) in group" :key="studentIndex" class="student-name">
                  {{ student }}<span v-if="studentIndex < group.length - 1">、</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="elbuttonbox">
          <!-- <el-button @click="copyDivContentToClipboard('content-to-copy')">复制</el-button> -->
          <el-button type="primary" @click="notuploadstuentishow = false">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import empty from "../../components/school/empty.vue"
import { get, post, del, put, analsisget } from '../../request/api.js'
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      // 测试
      studentlist: [],
      // 测试数组
      arr: [
        { className: '001', studentName: '专用学校1学生1、专用学校1学生02、专用学校1学生11、专用学校1学生13、专用学校1学生14、专用学校1学生15、专用学校1学生16、专用学校1学生17、专用学校1学生18、专用学校1学生19、专用学校1学生20、专用学校1学生21、专用学校1学生22、专用学校1学生23、专用学校1学生24、专用学校1学生25、专用学校1学生26、专用学校1学生27、专用学校1学生28、专用学校1学生29、专用学校1学生30、专用学校1学生31、专用学校1学生32、专用学校1学生33、专用学校1学生34、专用学校1学生35、专用学校1学生36、专用学校1学生37、专用学校1学生38、专用学校1学生39、专用学校1学生40、专用学校1学生41、专用学校1学生42、专用学校1学生43、专用学校1学生44、专用学校1学生45、专用学校1学生46、专用学校1学生47、专用学校1学生48、专用学校1学生49、专用学校1学生50、专用学校1学生51、专用学校1学生52、专用学校1学生53、专用学校1学生54、专用学校1学生55、专用学校1学生56、专用学校1学生57、专用学校1学生58、专用学校1学生59、专用学校1学生60、专用学校1学生61、专用学校1学生62、专用学校1学生63、专用学校1学生64、专用学校1学生65、专用学校1学生66、专用学校1学生67、专用学校1学生68、专用学校1学生69、专用学校1学生70、专用学校1学生71、专用学校1学生72、专用学校1学生73、专用学校1学生74、专用学校1学生75、专用学校1学生76、专用学校1学生77、专用学校1学生78、专用学校1学生79、专用学校1学生80、专用学校1学生81、专用学校1学生82、专用学校1学生83、专用学校1学生84、专用学校1学生85、专用学校1学生86、专用学校1学生87、专用学校1学生88、专用学校1学生89、专用学校1学生90' },
        { className: '002', studentName: '李四、王五、赵六、钱七、孙八、周九、吴十、郑十一、王十二' },
        { className: '003', studentName: '张三1、李四1、王五1、赵六1、钱七1' },
      ],
      exitStudent: {
        id: '',
        name: '',
        xh: '',
        examnumber: '',
        xb: '',
        grade: '',
        class: '',
        xk: '',
        smallyz: ''
      },
      months: [
        {
          name: '全选',
          options: [{ value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' }, { value: '1班', label: '1班' },],
          selected: [],
          checkedAll: false
        }
        // 其他月份数据...
      ],
      editscoreIshow: false,
      singlequestionishow: false,
      plquestionishow: false,
      plxiuradio: '1',
      scorelistobj: {
        page: 1,
        pageSize: 20,
        query: {
          examCourseId: 0,
          classId: 0,
          studentName: "",
          examNumber: ""
        }
      },
      total: 0,
      classlist: [],
      classid: null,
      multipleSelection: [],
      tableHeight: 0,
      checkAll: false, // 全选状态
      isIndeterminate: false, // 半选状态
      selectchecked: [], // 当前选中的复选框的值
      operatorlist: [
        {
          name: '+',
          id: 1
        },
        {
          name: '-',
          id: 2
        },
        {
          name: '*',
          id: 3
        },
        {
          name: '/',
          id: 4
        }
      ],
      singleobj: {
        examCourseId: 0,
        studentId: 0,
        questionIds: [],
        score: '',
        operator: '',
        isRounding: false
      },
      batchModife: {
        examCourseId: 0,
        examNumber: '',
        questionIds: [],
        score: '',
        operator: '',
        isRounding: false
      },
      examcheckAll: false, // 全选状态
      isIndeterminate1: false, // 半选状态
      smallselectAll: [],
      gradelist: [],
      classlist: [],
      gradeId: '',
      classIdlist: [],
      cardexamIshow: false,
      xuekelist: [],
      cardradio: '',
      sbstatus: {},
      studentObj: {
        pageSize: 1,
        query: {
          examId: '',
          classIds: [],
          eamxNumber: '',
          studentName: '',
          gradeId: 0
        }
      },
      studenttotal: 0,
      identotal: 0,
      objquery: {
        examCourseId: 0,
        batchNumber: '',
        examRoomNumber: '',
        classId: '',
        recognizeErrorCode: '',
        examNumber: '',
        studentName: ''
      },
      notuploadtotal: 0,
      notuploadSudent: [],
      checked: true,
      questionlist: [{ objectiveAnswers: [] }],
      imageurlink: '',
      imageishow: false,
      width: 0, height: 0,
      top: 0, left: 0,
      classlistbox: [],
      messboxishow: false,
      messboxishow1: false,
      messboxishow2: false,
      loading: false,
      intervaltime: null,
      notuploadstuentishow: false,
      phoneImageishow: false,
      timer: null,
      //
      scale: 1,
      top: 0,
      left: 0,
      width: 100,
      height: 100,
      translateX: 0,
      translateY: 0,
      isDragging: false,
      startX: 0,
      startY: 0,
      initialX: 0,
      initialY: 0
    }
  },
  mounted() {
    //获取年级列表
    // this.gradelisttab()
    this.$nextTick(() => {
      this.tableHeight = parseInt(document.documentElement.clientHeight - 470);
    });
    this.studentObjlist()
    this.cardsmstatus()
    this.identificationtab()
    this.getstudentlist(this.$route.query.subjectid)
    this.classconent()
    this.notupload()
    this.getclass()
    this.timer = setInterval(() => {
      this.godataload()
    }, 2000)
    document.addEventListener('wheel', this.onWheel);
  },
  watch: {
    selectchecked(value) {
      // 根据选中的复选框更新全选状态和半选状态
      const allIds = this.editcon.smallQuestions.map((item) => item.id);
      this.checkAll = value.length === allIds.length;
      this.isIndeterminate = value.length > 0 && value.length < allIds.length;
    },
    smallselectAll(value) {
      // 根据选中的复选框更新全选状态和半选状态
      const allIds = this.studentlist[0].smallQuestions.map((item) => item.id);
      this.examcheckAll = value.length === allIds.length;
      this.isIndeterminate1 = value.length > 0 && value.length < allIds.length;
    },
    tableHeight(newVal) {
      this.$nextTick(() => {
        if (this.$refs.multipleTable) { // Check if table ref exists
          this.$refs.multipleTable.doLayout();
        }
      });
    }
  },
  methods: {
    // 查看分析
    messboxclickassynic() {
      this.$router.push({
        path: '/gradescoreindex',
        query: {
          title: this.$route.query.examtitle,
        }
      })
    },
    // 轮训
    godataload() {
      let obj = {
        examCourseId: this.$route.query.subjectid,
      }
      get('/exampaper/updatestate', obj).then(res => {
        //console.info(res)
        if (res.data > 0) {
          // this.selectycbox()
          this.studentObjlist()
          this.cardsmstatus()
          this.identificationtab()
          this.classconent()
          this.notupload()
          this.getstudentlist(this.$route.query.subjectid)

        }
      })
    },
    // copyDivContentToClipboard(divId) {
    // 	const div = document.getElementById(divId);
    // 	if (!div) return false;

    // 	// 获取 div 的文本内容（去除首尾空格）
    // 	const textToCopy = div.textContent.trim();

    // 	// 使用 Clipboard API 写入剪贴板
    // 	navigator.clipboard.writeText(textToCopy)
    // 		.then(() => {
    // 		console.log('复制成功:', textToCopy);
    // 		alert('已复制到剪贴板！');
    // 		})
    // 		.catch((err) => {
    // 		console.error('复制失败:', err);
    // 		alert('复制失败，请手动复制！');
    // 		});
    // 	},
    closeDialog() {
      this.messboxishow = false
      this.messboxishow1 = false
      this.messboxishow2 = false
      this.phoneImageishow = false
    },
    closeModal() {
      this.messboxishow = false
      this.messboxishow1 = false
      this.messboxishow2 = false
      this.phoneImageishow = false
    },
    // 错题本
    messboxclick() {
      this.messboxishow = !this.messboxishow
      this.messboxishow1 = false
      this.messboxishow2 = false
      this.phoneImageishow = false
    },
    messboxclick1() {
      this.messboxishow = false
      this.messboxishow1 = !this.messboxishow1
      this.messboxishow2 = false
      this.phoneImageishow = false
    },
    messboxclick2() {
      this.messboxishow = false
      this.messboxishow1 = false
      this.messboxishow2 = !this.messboxishow2
      this.phoneImageishow = false
    },
    messboxclick3() {
      this.messboxishow = false
      this.messboxishow1 = false
      this.messboxishow2 = false
      this.phoneImageishow = !this.phoneImageishow
    },
    // 获取班级
    getclass() {
      let obj = {
        examId: this.$route.query.examid,
      }
      get('/work/class', obj)
        .then(res => {
          if (res.code == 200) {
            // //console.info(res)
            this.classlistbox = res.data
          } else {
            this.$message.error(res.message);
          }
        })
    },
    errorCommand(id) {
      // //console.info(id)
      this.$router.push({ path: '/errorwork', query: { id: id } })
    },
    checkchange(val) {
      if (!val) {
        this.scorelistobj.page = 1
        this.selectycbox()
      } else {
        this.scorelistobj.page = 1
        this.getstudentlist(this.$route.query.subjectid)
      }
    },
    //获取答题卡选项异常
    selectycbox() {
      let obj = {
        page: this.scorelistobj.page,
        pageSize: this.scorelistobj.pageSize,
        query: {
          examCourseId: this.$route.query.subjectid,
          examNo: this.scorelistobj.query.examNumber,
          studentName: this.scorelistobj.query.studentName,
        }
      };
      // //console.info(this.scorelistobj.page)
      post('/scanpaperexception/allrecord', obj)
        .then((res) => {
          if (res.code === 200) {
            // 检查数据是否存在
            if (res.data && res.data.items.length > 0) {
              this.$set(this, 'questionlist', res.data.items);
              this.total = res.data.total;
              this.$set(this, 'imageUrllist', res.data.items[0].paperImages);
              // this.questionlist = res.data.items;
              // this.total = res.data.total
              // this.imageUrllist = res.data.items[0].paperImages;
            } else {
              this.$set(this, 'questionlist', []);
              this.$set(this, 'imageUrllist', []);
              // this.questionlist = []; // 如果数据为空，设置为空数组
              // this.imageUrllist = [];
            }
            // 添加表格刷新逻辑
            this.$nextTick(() => {
              if (this.$refs.multipleTable) {
                this.$refs.multipleTable.doLayout();
                this.$refs.multipleTable.clearSelection();
              }
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error('请求失败，请检查网络连接');
          // console.error(error);
        });
    },
    formatClassStudents(students) {
      const classMap = students.reduce((acc, student) => {
        const className = student.className;
        if (!acc[className]) {
          acc[className] = [];
        }
        acc[className].push(student.studentName);
        return acc;
      }, {});

      // 返回数组格式，每个元素是一个班级的信息
      return Object.entries(classMap)
        .map(([cls, names]) => ({ className: cls, students: names }));
    },
    notupload() {
      this.objquery.examCourseId = this.$route.query.subjectid
      this.objquery.classId = 0
      this.objquery.recognizeErrorCode = 0
      let obj = {
        page: 1,
        pageSize: 10000,
        query: this.objquery
      }
      post('/exampaper/uploadlist', obj)
        .then(res => {
          if (res.code == 200) {
            // //console.info(res)
            console.info('res.data.items122222222', res.data.items)
            this.notuploadSudent = this.formatClassStudents(res.data.items);
            this.notuploadtotal = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    //识别记录
    identificationtab() {
      this.objquery.examCourseId = this.$route.query.subjectid
      this.objquery.classId = 0
      this.objquery.recognizeErrorCode = 0
      let obj = {
        page: 1,
        pageSize: 1,
        query: this.objquery
      }
      post('/exampaper/pagelist', obj)
        .then(res => {
          if (res.code == 200) {
            this.identotal = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    // 获取学生列表
    studentObjlist() {
      this.studentObj.query.examId = this.$route.query.examid
      this.studentObj.query.classIds = []
      this.studentObj.query.gradeId = 0
      post('/examstudent/list', this.studentObj)
        .then(res => {
          if (res.code == 200) {
            this.studenttotal = res.data.total
          } else {
            this.$message.error(res.message);
          }

        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    //获取答题卡扫描状态
    cardsmstatus() {
      let obj = {
        examCourseId: this.$route.query.subjectid
      }
      get('/scanpaperexception/exception', obj)
        .then(res => {
          // //console.info(res)
          if (res.code == 200) {
            this.sbstatus = res.data
            this.preogressstatus = ((res.data.identifyCount / res.data.paperCount) * 100).toFixed(2)
          } else {
            this.$message.error(res.message);
          }
        })
    },
    //跳转
    ycrouterlink(link, num) {
      let obj = {
        examCourseId: this.$route.query.subjectid
      }
      get('/scanpaperexception/exception', obj)
        .then(res => {
          // //console.info(res)
          if (res.code == 200) {
            this.sbstatus = res.data
            this.preogressstatus = ((res.data.identifyCount / res.data.paperCount) * 100).toFixed(2)
            if (link == '/homeabnormalexamnumber') {
              if (res.data.examNoExceptionCount != 0) {
                this.$router.push('/homeabnormalexamnumber?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid + '&examtitle=' + this.$route.query.examtitle + '&sujectname=' + this.$route.query.sujectname + '&activeIndex=' + num)
              } else {
                this.$message.warning('当前没有要处理考号异常！')
              }
            } else if (link == '/homeoptionexception') {
              if (res.data.optionExceptionCount != 0) {
                this.$router.push('/homeoptionexception?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid + '&examtitle=' + this.$route.query.examtitle + '&sujectname=' + this.$route.query.sujectname + '&activeIndex=' + num)
              } else {
                this.$message.warning('当前没有要处理选项异常！')
              }
            } else {
              if (res.data.scoreExceptionCount != 0) {
                this.$router.push('/homeabnormalrating?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid + '&examtitle=' + this.$route.query.examtitle + '&sujectname=' + this.$route.query.sujectname + '&activeIndex=' + num)
              } else {
                this.$message.warning('当前没有要处理打分异常！')
              }
            }
          } else {
            this.$message.error(res.message);
          }
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 处理每页条数变化
    handleSizeChange(val) {
      this.scorelistobj.pageSize = val
      if (this.checked) {
        this.getstudentlist(this.$route.query.subjectid)
      } else {
        this.selectycbox()

      }
    },
    handleCurrentChange(val) {
      this.scorelistobj.page = val
      if (this.checked) {
        this.getstudentlist(this.$route.query.subjectid)
      } else {
        this.selectycbox()

      }
    },
    examnumberTab() {
      if (this.checked) {
        this.getstudentlist(this.$route.query.subjectid)
      } else {

      }
    },
    studentNameTab() {
      if (this.checked) {
        this.getstudentlist(this.$route.query.subjectid)
      } else {
        this.selectycbox()

      }
    },
    classchange(val) {
      this.classid = val
      this.scorelistobj.query.classId = val ? val : 0
      if (this.checked) {

        this.getstudentlist(this.$route.query.subjectid)
      } else {
        this.selectycbox()
      }
    },
    // 获取班级
    classconent() {
      get('/exampaper/classlist', { examId: this.$route.query.examid })
        .then(res => {
          if (res.code == 200) {
            this.classlist = res.data
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    // 获取学生成绩列表
    getstudentlist(id) {
      // this.studentlist=[]
      this.scorelistobj.query.examCourseId = id
      post('/score/scoredetails', this.scorelistobj)
        .then(res => {
          // //console.info(res)
          if (res.code == 200) {
            this.studentlist = res.data.items.map((item, index) => ({
              ...item,
              uniqueKey: `${item.id}-${index}` // 添加唯一key
            }))
            this.questionlist = res.data.items && res.data.items.length > 0 ? res.data.items[0].smallQuestions.map((item, idx) => ({
              ...item,
              uniqueKey: `${item.id}-${idx}` // 添加唯一key
            })) : [];
            this.total = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
      // .catch(error=>{
      // 	this.$message.error(error.message);
      // })
    },
    // 补录分数内容
    supplementscore() {
      let scorelistid = []
      scorelistid = this.questionlist
        .filter(item => item.score !== 0) // 过滤出 score 不为 0 的项
        .map(item => ({
          questionId: item.id, // 提取 id 并重命名为 questionId
          score: item.score // 提取 score
        }));
      // //console.info(scorelistid)
      // return false
      let obj = {
        examCourseId: this.$route.query.subjectid,
        examNumber: this.exitStudent.examnumber,
        // name:this.exitStudent.name,
        // classId:this.exitStudent.xb,
        questionScores: scorelistid,
      }
      // //console.info(obj)
      // return false
      post('/score/addscore', obj)
        .then(res => {
          if (res.code == 200) {
            this.editscoreIshow = false
            this.getstudentlist(this.$route.query.subjectid)
          } else {
            this.$message.error(res.message)
          }
        })
    },
    // 补录分数
    editscorejx() {
      // this.editscoreIshow = false
      this.supplementscore()
    },
    editscoresure() {
      this.editscoreIshow = false
      this.supplementscore()
    },
    editscoregoback() {
      this.editscoreIshow = false
    },
    blfsscore() {
      this.editscoreIshow = true
    },
    //单个学生分数修改
    singlescore() {
      this.singleobj.examCourseId = this.$route.query.subjectid
      this.singleobj.studentId = this.editcon.id
      this.singleobj.questionIds = this.selectchecked
      // //console.info(this.singleobj)
      if (this.selectchecked.length == 0) {
        this.$message.warning('请选择题目进行修改小题分操作');
        return false
      }
      if (this.singleobj.operator == '') {
        this.$message.warning('请选择得分系数或运算方法进行修改小题分操作');
        return false
      }
      if (this.singleobj.score == '') {
        this.$message.warning('请填写的分数');
        return false
      }
      post('/score/updatescore', this.singleobj)
        .then(res => {
          if (res.code == 200) {
            this.$message.success(res.message)
            this.getstudentlist(this.$route.query.subjectid)
            this.singlequestionishow = false
            this.singleobj = {
              examCourseId: 0,
              studentId: 0,
              questionIds: [],
              score: '',
              operator: '',
              isRounding: false
            }
            this.selectchecked = []
          } else {
            this.$message.error(res.message)
          }
        })
      // post('/score/updatescore')
    },
    //保存继续
    singleeditscorejx() {
      this.singlescore()
      // //console.info(this.selectchecked)
    },
    //保存
    singleeditscoresure() {
      // this.singlequestionishow = false
      this.singlescore()
    },
    //取消
    singleeditscoregoback() {
      this.singlequestionishow = false
      this.singleobj = {
        examCourseId: 0,
        studentId: 0,
        questionIds: [],
        score: '',
        operator: '',
        isRounding: false
      }
      this.selectchecked = []
    },
    editscoresingle(con) {
      // //console.info(con)
      this.editcon = con
      this.singlequestionishow = true
    },
    //单个学生分数修改
    batchscore() {
      this.batchModife.examCourseId = this.$route.query.subjectid
      this.batchModife.questionIds = this.smallselectAll
      // //console.info(this.singleobj)
      if (this.batchModife.examNumber == '') {
        this.$message.warning('请填写准考证号');
        return false
      }
      if (this.smallselectAll.length == 0) {
        this.$message.warning('请选择题目进行修改小题分操作');
        return false
      }
      if (this.batchModife.operator == '') {
        this.$message.warning('请选择得分系数或运算方法进行修改小题分操作');
        return false
      }
      if (this.batchModife.score == '') {
        this.$message.warning('请填写的分数');
        return false
      }
      post('/score/batchscore', this.batchModife)
        .then(res => {
          if (res.code == 200) {
            this.$message.success(res.message)
            this.getstudentlist(this.$route.query.subjectid)
            this.plquestionishow = false
            this.batchModife = {
              examCourseId: 0,
              examNumber: '',
              questionIds: [],
              score: '',
              operator: '',
              isRounding: false
            }
            this.smallselectAll = []
          } else {
            this.$message.error(res.message)
          }
        })
      // post('/score/updatescore')
    },
    // 批量班级学生分数修改
    batchclassscorebox() {
      this.batchModife.examCourseId = this.$route.query.subjectid
      this.batchModife.questionIds = this.smallselectAll
      this.batchModife.classIds = this.classIdlist
      if (this.classIdlist.length == 0) {
        this.$message.warning('请选择班级');
        return false
      }
      if (this.smallselectAll.length == 0) {
        this.$message.warning('请选择题目进行修改小题分操作');
        return false
      }
      if (this.batchModife.operator == '') {
        this.$message.warning('请选择得分系数或运算方法进行修改小题分操作');
        return false
      }
      if (this.batchModife.score == '') {
        this.$message.warning('请填写的分数');
        return false
      }
      post('/score/batchclassscore', this.batchModife)
        .then(res => {
          if (res.code == 200) {
            this.$message.success(res.message)
            this.getstudentlist(this.$route.query.subjectid)
            this.plquestionishow = false
            this.batchModife = {
              examCourseId: 0,
              examNumber: '',
              questionIds: [],
              score: '',
              operator: '',
              isRounding: false
            }
            this.smallselectAll = []
            this.plquestionishow = false
          } else {
            this.$message.error(res.message)
          }
        })
      // //console.info(this.classIdlist)
      // //console.info(this.batchModife)
    },
    // 批量修改
    pleditscorejx() {
      // //console.info('this.plxiuradio',this.plxiuradio)
      if (this.plxiuradio == 1) {
        this.batchscore()
      } else {
        this.batchclassscorebox()
      }
    },
    pleditscoresure() {
      // //console.info('this.plxiuradio',this.plxiuradio)
      if (this.plxiuradio == 1) {
        this.batchscore()
      } else {
        this.batchclassscorebox()
      }
    },
    pleditscoregoback() {
      // this.batchscore()
      this.batchModife = {
        examCourseId: 0,
        examNumber: '',
        questionIds: [],
        score: '',
        operator: '',
        isRounding: false
      }
      this.smallselectAll = []
      this.plquestionishow = false
    },
    pleditscore() {
      this.plquestionishow = true
    },
    handleCheckAllChange(value) {
      // 全选状态改变时，更新 selectchecked 的值
      const allIds = this.editcon.smallQuestions.map((item) => item.id);
      this.selectchecked = value ? allIds : [];
      this.isIndeterminate = false;
    },
    handleCheckAllChange1(value) {
      // 全选状态改变时，更新 selectchecked 的值
      const allIds = this.studentlist[0].smallQuestions.map((item) => item.id);
      this.smallselectAll = value ? allIds : [];
      this.isIndeterminate1 = false;
    },
    //获取年纪列表
    gradelisttab() {
      get('/grade/list')
        .then(res => {
          if (res.code == 200) {
            this.gradelist = res.data
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error(error.message);
        })
    },
    xbchange(val) {
      if (val) {
        get('/grade/classlist', { gradeId: val })
          .then(res => {
            if (res.code == 200) {
              this.classlist = res.data
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(error => {
            this.$message.error(error.message);
          })
      } else {
        get('/classes/list')
          .then(res => {
            if (res.code == 200) {
              this.classlist = res.data
            } else {
              this.$message.error(res.message);
            }
          })
          .catch(error => {
            this.$message.error(error.message);
          })
      }
    },
    lookcard(con) {

      // console.info(con.paperImages)
      let photo = con.paperImages.filter(item => item.filePath).map(item => item.filePath)
      console.info('photo', photo)
      const $viewer = this.$viewerApi({
        images: photo
      })
    },
    //删除成绩
    deletescore(id) {
      let obj = {
        examCourseId: this.$route.query.subjectid,
        studentIds: [id]
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        post('/score/deletescore', obj)
          .then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getstudentlist(this.$route.query.subjectid)
              this.studentObjlist()
              this.cardsmstatus()
              this.identificationtab()
              this.classconent()
              this.notupload()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          })
          .catch(error => {
            this.$message({
              type: 'error',
              message: error.message
            });
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //批量删除成绩
    // 批量删除学生
    deletebatchscore() {
      if (this.multipleSelection.length > 0) {
        let obj = {
          examCourseId: this.$route.query.subjectid,
          studentIds: this.multipleSelection.map(item => item.id)
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          post('/score/deletescore', obj)
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getstudentlist(this.$route.query.subjectid)
                this.studentObjlist()
                this.cardsmstatus()
                this.identificationtab()
                this.classconent()
                this.notupload()
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                });
              }
            })
            .catch(error => {
              this.$message({
                type: 'error',
                message: error.message
              });
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择要删除的内容'
        });
      }
    },
    handleCellClick1(row, imglist) {
      // //console.info('image',imglist)
      // 更新图片和数据
      this.imageishow = true
      // this.selectedAreas = [{ width: row.w, height: row.h, x: row.x, y: row.y }];
      this.width = row.w
      this.height = row.h
      this.top = row.y
      this.left = row.x
      this.imageurlink = imglist[row.page - 1].filePath
      this.$nextTick(() => {
        const container = this.$refs.scrollContainer;
        if (container) {
          // 确保传入数值
          const targetX = Number(row.x);
          const targetY = Number(row.y);
          setTimeout(() => {
            container.scrollTo({
              top: targetY - 80,
              left: targetX - 80,
              behavior: "smooth",
            });
            // //console.log("After smooth scroll:", container.scrollTop); 
          }, 100);
        }
      });
    },
    // handleCellClick(row, imglist) {
    //   // //console.info('imglist',row) 
    //   // 更新图片和数据
    //   this.imageishow = true
    //   // this.selectedAreas = [{ width: row.w, height: row.h, x: row.x, y: row.y }];
    //   this.width = row.w
    //   this.height = row.h
    //   this.top = row.y
    //   this.left = row.x
    //   this.imageurlink = imglist[row.page - 1].filePath
    //   this.$nextTick(() => {
    //     const container = this.$refs.scrollContainer;
    //     if (container) {
    //       // 确保传入数值
    //       const targetX = Number(row.x);
    //       const targetY = Number(row.y);
    //       // //console.info('targetX',targetX)
    //       // //console.info('targetY',targetY)
    //       // 方式 1：直接滚动
    //       container.scrollLeft = targetX;
    //       container.scrollTop = targetY;
    //     }
    //   });
    // },
    // handleCellClick(row, imglist) {
    //   // console.log(row,'数据');

    //   this.imageishow = true;
    //   this.width = row.w;
    //   this.height = row.h;
    //   this.top = row.y;
    //   this.left = row.x;
    //   this.imageurlink = imglist[row.page - 1].filePath;

    //   const viewportWidth = window.innerWidth;
    //   const viewportHeight = window.innerHeight;
    //   this.translateX =  row.x;
    //   this.translateY = (viewportHeight / 2) - row.y;
    //   this.scale = 1;
    // },
    handleCellClick(row, imglist) {
      this.imageishow = true;
      this.width = row.w;
      this.height = row.h;
      this.top = row.y;
      this.left = row.x;
      this.imageurlink = imglist[row.page - 1].filePath;
      this.scale = 1;

      this.$nextTick(() => {
        const img = new Image();
        img.src = this.imageurlink;
        img.onload = () => {
          const viewportWidth = window.innerWidth;
          const viewportHeight = window.innerHeight;
          const imgWidth = img.width;
          const imgHeight = img.height;

          let translateX = (viewportWidth - imgWidth) / 2;
          let translateY = (viewportHeight - imgHeight) / 2;

          let fixedLeft = translateX + this.left;
          let fixedRight = fixedLeft + this.width;
          let fixedTop = translateY + this.top;
          let fixedBottom = fixedTop + this.height;

          if (fixedLeft < 0) {
            translateX += -fixedLeft;
          }

          if (fixedRight > viewportWidth) {
            translateX -= (fixedRight - viewportWidth);
          }
          if (fixedTop < 0) {
            translateY += -fixedTop; 
          }
          if (fixedBottom > viewportHeight) {
            translateY -= (fixedBottom - viewportHeight); 
          }

          this.translateX = translateX;
          this.translateY = translateY;
        };
      });
    },

    onMouseDown(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.initialX = this.translateX;
      this.initialY = this.translateY;
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onMouseMove(e) {
      if (!this.isDragging) return;
      this.translateX = this.initialX + (e.clientX - this.startX);
      this.translateY = this.initialY + (e.clientY - this.startY);
    },
    onMouseUp() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
    },
    onWheel(e) {
      if (!this.imageishow) return;
      e.preventDefault();
      const delta = e.deltaY > 0 ? -0.1 : 0.1;
      let newScale = this.scale + delta;
      newScale = Math.max(0.2, Math.min(newScale, 5));
      this.scale = newScale;
    },
    closeboximg() {
      this.imageishow = false;
    },
    // 本次错题
    // messboxcontent(id,gradename,classname){
    // 	let title = this.$route.query.examtitle+'-'+this.$route.query.sujectname+'-'+gradename+'-'+classname
    //     this.$router.push('/errorwork?classId='+id+'&subjectId='+this.$route.query.subjectid+'&examId='+this.$route.query.examid+'&examtitle='+title)
    // },
    // 学成分析
    messboxcontent(studentNumber, gradeid, id, gradename, classname, urllink) {
      if (studentNumber > 0) {
        this.loading = true
        let obj = {
          examCourseId: this.$route.query.subjectid
        }
        get('/course/getsubject', obj).then(subject => {
          if (subject.code == 200) {
            get('/work/pushstate', obj)
              .then(res => {
                if (res.code == 200) {
                  this.loading = false
                  if (res.data == 3) {
                    let title = this.$route.query.examtitle + '-' + this.$route.query.sujectname + '-' + gradename + '-' + classname
                    analsisget(`/api/class/get/${this.$route.query.examid}`, { classId: id })
                      .then(anysis => {
                        // //console.info(anysis)
                        if (anysis.code == 200) {
                          if (anysis.data.status == 2) {

                            if (urllink.includes('https')) {
                              window.location.href = `${urllink}?examId=${this.$route.query.examid}&classId=${id}&title=${title}&subjectid=${subject.data}&gradeid=${gradeid}&courseid=${this.$route.query.subjectid}`
                            } else {
                              this.$router.push(`${urllink}?examId=${this.$route.query.examid}&classId=${id}&title=${title}&subjectid=${subject.data}&gradeid=${gradeid}&courseid=${this.$route.query.subjectid}`)
                            }
                          } else {
                            this.$message.error('当前分析未加载完成')
                          }
                        } else {
                          this.$message.error(res.message);
                        }
                      })
                  } else {
                    const formData = new FormData();
                    formData.append('courseId', this.$route.query.subjectid);
                    post('/score/publishscore', formData, {
                      headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                      }
                    })
                      .then(res => {
                        if (res.code == 200) {
                          let title = this.$route.query.examtitle + '-' + this.$route.query.sujectname + '-' + gradename + '-' + classname
                          analsisget(`/api/class/get/${this.$route.query.examid}`, { classId: id })
                            .then(anysis => {
                              if (anysis.code == 200) {
                                if (anysis.data.status == 2) {
                                  if (urllink.includes('https')) {
                                    window.location.href = `${urllink}?examId=${this.$route.query.examid}&classId=${id}&title=${title}&subjectid=${subject.data}&gradeid=${gradeid}&courseid=${this.$route.query.subjectid}`
                                  } else {
                                    this.$router.push(`${urllink}?examId=${this.$route.query.examid}&classId=${id}&title=${title}&subjectid=${subject.data}&gradeid=${gradeid}&courseid=${this.$route.query.subjectid}`)
                                  }
                                } else {
                                  this.$message.error('当前分析未加载完成')
                                }
                              } else {
                                this.$message.error(res.message);
                              }
                            })
                        } else {
                          this.loading = false
                          this.$message.error(res.message)
                        }
                      })
                  }
                } else {
                  this.loading = false
                }
              })
          }
        })
      } else {
        this.$message.error('该班级没有人提交成绩，无法分析/显示错题/无法使用在线讲评')
      }
    },
    // messboxcontent2(id,gradename,classname){
    //     let title = this.$route.query.examtitle+'-'+this.$route.query.sujectname+'-'+gradename+'-'+classname
    //     analsisget(`/api/class/get/${this.$route.query.examid}`,{classId:id})
    //     .then(anysis=>{
    //         //console.info(anysis)
    //         if(anysis.code==200){
    //             if(anysis.data.status==2){
    //                 window.open(`https://wb.bsedu.com?examId=${this.$route.query.examid}&classId=${id}&title=${title}`)
    //             }else{
    //                 this.$message.error('当前分析未加载完成')
    //             }
    //         }else{
    //             this.$message.error(res.message);
    //         }
    //     })
    // }
  },
  components: { navTop, empty },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    document.removeEventListener('wheel', this.onWheel);
  },
  destroyed() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  computed: {
    // 按班级分组学生数据
    // groupedStudents () {
    //   const grouped = {};
    //   this.arr.forEach(student => {
    //     if (!grouped[student.className]) {
    //       grouped[student.className] = [];
    //     }
    //     grouped[student.className].push(student.studentName);
    //   });
    //   return grouped;
    // },

    // 格式化未上传学生数据 - 支持3个一行显示
    formattedNotUploadStudents() {
      // 使用真实的请求数据，如果为空则使用arr测试数据
      const dataSource = this.notuploadSudent.length > 0 ? this.notuploadSudent : [];
      console.info('dataSource', this.arr)
      return dataSource.map(classInfo => {
        // 处理不同的数据格式
        let students = [];
        if (typeof classInfo.studentName === 'string') {
          // 如果是字符串格式（测试数据），按逗号或顿号分割
          students = classInfo.studentName.split(/[、，,]/).filter(name => name.trim());
        } else if (Array.isArray(classInfo.students)) {
          // 如果是数组格式（真实数据），直接使用
          students = classInfo.students;
        }

        // 将学生名单按3个一组分段
        const studentGroups = [];
        for (let i = 0; i < students.length; i += 4) {
          studentGroups.push(students.slice(i, i + 4));
        }

        return {
          className: classInfo.className,
          studentGroups: studentGroups,
          totalCount: students.length
        };
      });
    },
    ...mapGetters(['getScreenWidth']),
    screenWidth() {
      return this.getScreenWidth;
    },
  },
}
</script>

<style scoped>
.main {
  width: 100vw;
  background: #F4F7FD;
  min-height: 100vh;
}

.contentMain {
  box-sizing: border-box;
  width: auto;
  padding: 24px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
}

.contentboxset {
  background: #fff;
  height: 32px;
  border-top: solid 2px #F4F7FD
}

.breadBox {
  width: 1440px;
  margin: 0 auto;
  min-width: 1200px;
  line-height: 32px;
  padding-right: 80px
}

.contentMain ul {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
}

.contentMain ul li {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 14px;
  color: #557292;
  margin-right: 14px;
}

.contentMain ul li>>>.el-input {
  width: 124px;
}

.contentMain ul li>>>.el-input__inner {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.contentMain ul li>>>.el-input__icon {
  line-height: 34px;
}

.headerwidth {
  width: 1440px;
  margin: 0 auto;
  ;
}

.examfooter {
  width: 100%;
  height: 54px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  ;
}

.examFootercontent {
  width: 1440px;
  ;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examFootercontent .totaldata {
  font-size: 14px;
  color: #557292;
  display: flex;
  justify-content: left;
  align-items: center;
}

.examFootercontent .totaldata i {
  display: inline-block;
  color: #295CFF;
  font-style: normal;
  line-height: 54px;
  padding: 0 3px;
}

.examFootercontent .totaldata em {
  font-style: normal;
  width: 96px;
  height: 34px;
  border-radius: 10px;
  line-height: 34px;
  background: #295CFF;
  text-align: center;
  color: #fff;
  margin-left: 14px;
  cursor: pointer;
}

.examFootercontent .totaldata em:last-child {
  background: #EC555A;
}

.examFootercontent .totaldata>>>.el-pager li.active {
  background-color: #295CFF
}

.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.34);
  border-radius: 10px;
  border-right: none;
  border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
  background-color: #E8F0FA;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal
}

.custom-table>>>.el-table__row th {
  font-size: 14px;
}

.custom-table>>>.el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #D8E4F0;
}

.examFootercontent>>>.el-pagination__jump {
  margin-left: 5px;
}

.examFootercontent>>>.el-pager {
  margin-top: 2px;
}

.examFootercontent>>>.el-pager li {
  margin: 0 3px;
  min-width: 25px;
  height: 25px;
  line-height: 25px
}

.examFootercontent>>>.el-pagination button {
  margin-top: 2px;
}



.el-breadcrumb {
  width: auto;
  padding: 0 40px;
  margin: 0 auto;
  line-height: 30px;
  font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #B3B8C2
}

.tablebox {
  margin-top: 14px;
  height: calc(100vh - 480px);
}

.tablebox>>>.el-table {
  height: calc(100vh - 470px) !important;
}

.addExamMain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 100;
}

.addExamContent {
  width: 584px;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  padding: 30px;
  max-height: 600px;
}

.checkboxcontent {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

.addExamContent h3 {
  font-size: 18px;
  padding-bottom: 20px;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
  justify-content: left;
}

.groupbutton>>>.el-button {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0;
}

.groupbutton>>>.el-button:last-child {
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #295CFF;
  color: #295CFF;
  margin-left: 24px;
}

.addExamContent ul {
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}

.addExamContent ul::-webkit-scrollbar {
  width: 4px;
  background-color: #eee;
  border-radius: 10px;
}

.addExamContent ul::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.addExamContent ul::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.addExamContent ul li {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  font-size: 14px;
}

.addExamContent ul li span {
  font-size: 14px;
  width: 100px;
  color: #557292;
  text-align: right;
}

.addExamContent ul li p {
  position: relative;
}

.addExamContent ul li p em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #C0C4CC;
  cursor: pointer;
}

.addExamContent ul li>>>.el-input__inner {
  width: 400px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.addExamContent ul li>>>.el-input__icon {
  line-height: 34px;
}

.inputBox {
  width: 400px;
}

.inputBox1 {
  width: 300px;
}

.addExamContent ul li div.inputBox1>>>.el-input__inner {
  width: 300px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.addExamContent ul li>>>.el-range__icon {
  line-height: 34px;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.groupbutton>>>.el-button {
  width: 124px;
  height: 34px;
  background: #295CFF;
  border-radius: 10px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 0;
}

.groupbutton>>>.el-button:last-child {
  background: #F2F6FB;
  border-radius: 10px;
  border: 1px solid #295CFF;
  color: #295CFF;
  margin-left: 14px;
}

.bcontentcolor {
  font-size: 14px;
  color: #295CFF;
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
}

.infosetcontentfont {
  color: #5B6371
}

.addExamContent ul li.infosetcontentfont span {
  width: auto;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #D8E4F0;
  color: #B3B8C2;
  font-size: 14px;
  text-align: left;
  line-height: 26px;
  padding: 0 16px 0 10px;
  margin-left: 10px;
}

.addExamContent ul li.infosetcontentfont i {
  font-style: normal;
  color: #295CFF;
  padding: 0 4px;
}

.addExamContent>>>.el-upload-dragger {
  width: 522px;
}

.checkbox-group {
  font-size: 14px;
  color: #5B6371;
  margin-bottom: 20px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

.el-checkbox {
  margin-bottom: 12px;
}

.czdfSet {
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 14px;
  color: #557292;
}

.czdfSet>>>.el-input {
  width: 100px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.czdfSet>>>.el-input__inner {
  width: 100px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.czdfSet>>>.el-input__icon {
  line-height: 34px;
}

.czdfSet span {
  display: inline-block;
  color: #5B6371;
  margin-top: 9px;
}

.czdfSet span .el-checkbox {
  margin-left: 5px;
}

.czdfContent {
  display: flex;
  justify-content: left;
  align-items: center;
  /* margin-top: 14px; */
}

.czdfContent span {
  font-size: 14px;
  color: #557292;
  width: 80px;
}

.czdfContent>>>.el-input {
  width: 436px;
}

.czdfContent>>>.el-input__inner {
  width: 436px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.czdfContent>>>.el-input__icon {
  line-height: 34px;
}

.czdfContent>>>.el-textarea {
  width: 436px;
}

.czdfContent>>>.el-textarea__inner {
  width: 436px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #D8E4F0;
}

.contentMain>>>.el-table__body-wrapper::-webkit-scrollbar {
  width: 4px !important;
  background-color: #eee;
  border-radius: 10px;
}

/* 针对 Webkit 内核浏览器（如 Chrome, Safari） */
.el-table__body::-webkit-scrollbar {
  width: 4px;
  /* 滚动条宽度 */
  height: 4px;
  /* 滚动条高度 */
}

.el-table__body::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  /* 滚动条颜色 */
  border-radius: 3px;
}

.el-table__body::-webkit-scrollbar-track {
  background: #e0e0e0;
  /* 修改为不透明的颜色 */
  border-radius: 3px;
  opacity: 1;
  /* 确保不透明 */
}

/* 针对 Firefox */
.el-table__body {
  scrollbar-width: thin;
  scrollbar-color: #b0b0b0 #e0e0e0;
}

.contentMain>>>.el-table--scrollable-y::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  background-color: #eee;
  border-radius: 10px;
}

.contentMain>>>.el-table__body-wrapper::-webkit-scrollbar-track {
  background: #e0e0e0;
  /* 修改为不透明的颜色 */
  border-radius: 3px;
  opacity: 1;
  /* 确保不透明 */
}

.contentMain>>>.el-table--scrollable-y::-webkit-scrollbar-track {
  background: #e0e0e0;
  /* 修改为不透明的颜色 */
  border-radius: 3px;
  opacity: 1;
  /* 确保不透明 */
}

.contentMain>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table--scrollable-y::-webkit-scrollbar-thumb {
  background: #619CF5;
  border-radius: 10px;
}

.contentMain>>>.el-table__fixed-right {
  right: 4px !important
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
  font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold
}

.singlecontent {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-bottom: 15px;
}

.singlecontent span {
  display: inline-block;
  padding-right: 20px;
  color: #606266;
}

.missanexam {
  width: 634px;
  height: 272px;
  border-radius: 4px;
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  z-index: 1100;
  box-sizing: border-box;
  padding: 0 30px;
}

.missanexam h3 {
  text-align: center;
  padding: 24px 0;
  font-size: 14px;
  font-weight: normal;
}

.missanexam h3 i {
  font-style: normal;
  color: rgb(255, 125, 0);
  font-size: 16px;
  display: inline-block;
  padding-right: 6px;
}

.missanexam p {
  text-align: center;
  font-size: 14px;
  padding-bottom: 24px;
}

.missanexam>>>.el-radio {
  margin-top: 30px;
}

.emptyBox {
  position: relative;
  padding-top: 100px;
}

boxbutton {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.boxbutton>>>.el-button:last-child {
  margin-left: 30px;
}

.idenboxmain {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 15px;
  width: 1400px;
  min-width: 1200px;
  margin: 0 auto
}

.dtkanswerlist {
  width: 335px;
  height: 164px;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 15px 24px;
  margin-top: 14px;
}

.identistatusmodify {
  width: calc(100% - 350px);
  height: 164px;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 14px 24px;
  margin-top: 14px;
}

.tychulititle {
  font-size: 18px;
  color: #2A303B;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.tychulititle div {
  color: #295CFF;
  padding-left: 15px;
  padding-right: 4px;
  font-size: 16px;
  font-weight: 100;
}

.tychulititle span {
  color: #8E96A4;
  font-size: 16px;
  font-weight: 100;
}

.tychuliul {
  display: flex;
  align-items: center;
  padding-top: 14px;
}

.tychuliul li {
  box-sizing: border-box;
  width: 324px;
  height: 86px;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
}

.tychuliul li:first-child {
  background: #ec555a0a;
  border: 1px solid #ec555a33;
}

.tychuliul li {
  background: #295cff0a;
  border: 1px solid #295cff33;
  margin-right: 14px;
}

.tychuliul li h4 {
  font-size: 16px;
  color: #333333;
  padding-bottom: 5px;
}

.tychuliul li span {
  display: block;
  color: #8E96A4;
  font-size: 12px;
  line-height: 18px;
}

.dtkanswerlist p {
  font-size: 18px;
  color: #000;
  font-weight: bold;
  height: 52px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  /* Adjust based on your font size */
}

.dtkanswerlist p span {
  display: block;
  color: #295CFF;
  font-size: 14px;
}

.dtkanswerlist ul {
  font-size: 14px;
  color: #999;
  padding-top: 8px;
}

.dtkanswerlist ul li {
  padding-right: 50px;
  line-height: 1.8;
}

.dtkanswerlist>>>.el-input__inner {
  width: 124px;
  border-radius: 10px;
  height: 35px;
  font-size: 14px;
}

.dtkanswerlist>>>.el-input__icon {
  line-height: 35px;
}

.searchlist {
  box-sizing: border-box;
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 0 24px;
  margin: 0 auto 15px;
}

.searchlist a {
  display: block;
  color: #557292;
  font-size: 14px;
  width: 100px;
  text-align: center;
  position: relative;
  line-height: 52px;
}

.searchlist a:hover,
.searchlist a.hover {
  color: #2A303B;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
  content: '';
  width: 24px;
  height: 4px;
  background: #295CFF;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.qxboxset {
  display: flex;
}

.qxboxset div {
  margin-left: 14px;
  position: relative
}

.qxboxset div span {
  display: inline-block;
  border-radius: 10px;
  padding: 9px 15px;
  background-color: #295CFF;
  border-color: #295CFF;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.qxboxset div ul {
  width: 157px;
  height: auto;
  background: rgb(253, 253, 254);
  box-shadow: 0 4px 16px 0 rgba(85, 114, 146, 0.3);
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 99;
  padding: 10px 0;
}

.qxboxset div div.phoneimagecontent {
  box-sizing: border-box;
  width: 160px;
  height: 180px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  text-align: center;
  padding: 12px 0 8px;
  position: absolute;
  left: -15px;
  z-index: 99;
}

.qxboxset div div.phoneimagecontent img {
  width: 136px;
  height: 136px;
}

.qxboxset div div.phoneimagecontent b {
  display: block;
  font-size: 14px;
  color: #666666;
}

.qxboxset div ul b {
  font-size: 14px;
  color: #2A303B;
  font-weight: 500;
  padding: 0 14px;
  line-height: 34px;
}

.qxboxset div:last-child ul {
  left: inherit;
  right: 0;
}

.qxboxset div ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  line-height: 34px;
  font-size: 14px;
  color: #666666;
  cursor: pointer;
}

.qxboxset div ul li:hover {
  background: rgb(244, 247, 253);
  color: #295CFF
}

.qxboxset div ul li span {
  display: inline-block;
}

.qxboxset div ul li i {
  font-style: normal;
}

/* .loadimgBox {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  left: 0;
  top: 0;
  z-index: 100
}

.loadingContent {
  background: #fff;
  position: absolute;
  width: 80vw;
  height: 80vh;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 101;
  overflow: auto
}

.fiexdstle {
  display: block;
  position: fixed;
  z-index: 102;
  background: rgba(0, 0, 0, 0.1);
  border: solid 2px red
}

.closeimg {
  position: fixed;
  right: 10px;
  top: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 0 20px 20px;
  z-index: 103;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
} */
.loadimgBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  overflow: hidden;
  /* 这里禁用滚动条 */
  user-select: none;
  cursor: grab;
}

.closeimg {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, transform 0.2s;
}

.closeimg:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}


.image-container {
  position: absolute;
  /* top/left 由 JS 控制，初始可居中 */
  will-change: transform;
}



.fiexdstle {
  position: absolute;
  border: 2px solid red;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 10;
}

.custom-tooltip {
  width: 200px;
}

.notuploadStudent {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 100;
}

.notuploadStudentContent {
  width: 600px;
  max-height: 500px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px 0 #5572921a;
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.notuploadStudentContent h3 {
  font-size: 18px;
  color: #2A303B;
}

.contentset {
  font-size: 16px;
  color: #5B6371;
  padding: 20px 0;
  max-height: 300px;
  overflow-y: auto;
}

/* 优化后的分段显示样式 */
.class-section {
  margin-bottom: 20px;
}

.class-title {
  font-weight: bold;
  color: #2A303B;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #E8F0FA;
}

.student-groups {
  padding-left: 10px;
}

.student-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6px;
  line-height: 1.6;
}

.student-name {
  display: inline-block;
  margin-right: 5px;
}

.elbuttonbox {
  display: flex;
  align-items: center;
}

.elbuttonbox>>>.el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px 10px 10px 10px;
  padding: 0;
}

/* .elbuttonbox>>>.el-input__inner {
  line-height: 34px;
  font-size: 14px;
  color: #fff;
  padding: 0;
} */

/* .elbuttonbox >>> .el-button:first-child{
		background:#4985FF;
		border:solid 1px #4985FF;
		color:#fff;
		margin-right:15px;
	} */
/* .elbuttonbox>>>.el-button:last-child {
  background: #F5F6F8;
  border: solid 1px #B3B8C2;
  color: #B3B8C2
} */
</style>
<style>
.el-button--text {
  color: #295CFF
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #295CFF;
  color: #FFF;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #295CFF;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #295CFF;
  border-color: #295CFF;
}
</style>